<template>
    <div class="common-size">
        <page-head :pageHead="pageHeadData"></page-head>
        <div class="pie-desc-distribution-chart clear">
            <div ref="valueDis" class="pie-chart left"></div>
            <table class="left pie-chart-desc" style="margin:70px 0 0 30px">
                <tbody>
                <template v-for="(item,index) in descData">
                    <tr >
                        <td ><i v-bind:class="'i-'+(index+1) "></i></td>
                        <td>{{item.name}}</td>
                    </tr>
                    <tr class="bottom">
                        <td></td>
                        <td><b>{{item.value}}</b>次，<b>{{item.equipment_value}}</b>台，<b>{{item.percent}}%</b></td>
                    </tr>
                </template>

                </tbody>
            </table>
            <h2 class="charts_title">设备维修价值分布</h2>
        </div>
        <div class="sending-book-text">
            <div  v-html="item" v-for="(item, index) in textData"></div>
        </div>
        <page-footer :pageFooter="pageFooterData"></page-footer>
    </div>
</template>

<script>
    import { merge ,throttle} from "lodash"
    // 引入 ECharts 主模块
    let echarts = require('echarts/lib/echarts');
    // 引入柱状图
    require('echarts/lib/chart/pie');
    // 引入提示框和标题组件
    require('echarts/lib/component/tooltip');

    import pageHead from './pageHead.vue'
    import PageFooter from "./pageFooter.vue";
    import {nuxtMixins} from '../assets/javascript/mixin'

    export default {
        name: 'value_repair_analysis',
      props:['chartData'],
      mixins: [nuxtMixins],
        data(){
            return {
                getDefaultOptions: {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    series: [{
                        name: '使用时长分布',
                        type: 'pie',
                        radius: ['60%', '75%'],
                        center: ['50%', '50%'],
                        clockwise: true,
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderWidth: 4,
                                borderColor: '#FFF',
                            },
                            emphasis: {
                                borderWidth: 0,
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            normal: {
                                show:false
                            }
                        }
                    }]


                },
              pageTitle: '价值维修分析',
              detailTitle: '价值维修分布'
            }
        },
        computed:{
          oneRemarkData () {
            return this.chartData.remark
          },
          textData () {
            return this.chartData.textData
          },
          descData () {
            return this.chartData.chartData
          }
        },
        methods: {
            updateDimensions(){
                this.chart.resize();
            },
            readyRenderLineChart(){
                if(!this.$props.chartData.chartData) return
                let chartData=this.$props.chartData.chartData;
                let linearColor = this.readyLinearColor;
                let learColor = [
                    {start:'#5a8cc4',end:'#98badf'},
                    {start:'#75c075',end:'#a4d39b'},
                    {start:'#f1ca2c',end:'#f7e291'},
                    {start:'#f18c64',end:'#f6b883'},
                    {start:'#686bb0',end:'#8f91c7'}
                ]
                chartData.forEach((obj,index)=>{
                    obj['itemStyle'] = {
                        normal: {
                         color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: learColor[index].start // 0% 处的颜色
                            }, {
                                offset: 1, color: learColor[index].end // 100% 处的颜色
                            }]
                            }
                        }
                    }

                });
                this.getDefaultOptions.series[0]['data'] = chartData
                this.chart.setOption(this.getDefaultOptions);
            },
        },
        mounted: function () {
            this.chart = echarts.init(this.$refs.valueDis)
            window.addEventListener("resize", throttle(this.updateDimensions));
            this.readyRenderLineChart()
        },
        components: {
          PageFooter,
          pageHead
        }


    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">


</style>
